<template>
  <div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
      <div class="flex justify-center mb-8">
        <div class="w-24 h-24 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
          <span class="text-white font-bold text-3xl">H</span>
        </div>
      </div>
      
      <h1 class="text-6xl font-bold text-gray-900 mb-4">404</h1>
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">Page Not Found</h2>
      <p class="text-gray-600 mb-8">
        The page you're looking for doesn't exist or has been moved.
      </p>
      
      <div class="space-y-4">
        <router-link 
          to="/" 
          class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Go Home
        </router-link>
        
        <div class="text-sm text-gray-500">
          Or try one of these popular pages:
        </div>
        
        <div class="flex flex-wrap justify-center gap-2">
          <router-link 
            to="/marketplace" 
            class="px-4 py-2 text-blue-600 hover:text-blue-800 text-sm font-medium"
          >
            Marketplace
          </router-link>
          <router-link 
            to="/create-agent" 
            class="px-4 py-2 text-blue-600 hover:text-blue-800 text-sm font-medium"
          >
            Create Agent
          </router-link>
          <router-link 
            to="/create-team" 
            class="px-4 py-2 text-blue-600 hover:text-blue-800 text-sm font-medium"
          >
            Create Team
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// No additional logic needed for this simple 404 page
</script>
